import React, { useEffect } from 'react';
import { Table } from "antd";
import { useAppDispatch } from "@/hooks";
import { getFindByParentIdAsync, useSelectorDict } from "@/store/slice/dict";

function Dict() {
  // 创建dispatch
  const dispatch = useAppDispatch();
  // dicList初始状态
  const { dictList,loading } = useSelectorDict();
  // 请求接口
  useEffect(() => {
    dispatch(getFindByParentIdAsync(1));
  }, [])

  // 展开数据需要满足条件 dataSource所指定的数据中的元素(对象) 需要有children属性 值是数组
  return (
    <div>
      <Table
        loading= {loading}
        columns={[
          {
            title: "名称",// 表格列的标头
            dataIndex: "name",// 会将dataSource数组中元素（对象）的name属性输出
          }, {
            title: "编码",
            dataIndex: "dictCode"
          }, {
            title: "值",
            dataIndex: "value"
          }, {
            title: "创建时间",
            dataIndex: "createTime"
          }
        ]}
        // 不显示分页
        pagination={false}
        // 唯一标识
        rowKey={"id"}
        // 数据数组
        dataSource={dictList}
        // 看文档 展开属性 expandable
        expandable={{
          onExpand(expanded, record) {
            // expanded:是布尔值，true 点开，false 折叠
            // record:行信息
            // console.log(expanded,record)
            if (expanded) {
              dispatch(getFindByParentIdAsync(record.id));
            }
          }
        }}


      ></Table>
    </div>
  );
}

export default Dict;